/* 搜索框 */
.fans-header-serach {
  position: sticky;
  z-index: 100;
  background-color: #fff;
  border-top: 2rpx solid #f2f3f6;
  display: flex;
  justify-content: space-between;
  padding: 17rpx 8rpx 10rpx 8rpx;
  height: 60rpx;
  
    .search-box {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .search-box {
      position: relative;
      padding: 4rpx;
      /* 为渐变边框预留空间 */
      border-radius: 40rpx;
      background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
    }
  
    .search-box::before {
      content: '';
      position: absolute;
      top: 2rpx;
      left: 2rpx;
      right: 2rpx;
      bottom: 2rpx;
      background: white;
      border-radius: 40rpx;
    }
  
    .search-input {
      position: relative;
      border: none;
      border-radius: 40rpx;
      outline: none;
      font-size: 24rpx;
      background: transparent;
      flex: 1;
      padding-left: 24rpx;
      padding-right: 124rpx;
    }
  
    .search-input::placeholder {
      color: #bfbfbf !important;
    }
  
    .search-btn {
      position: absolute;
      right: 6rpx;
      top: 4rpx;
      bottom: 4rpx;
      border: none;
      border-radius: 40rpx;
      width: 100rpx;
      height: 50rpx;
      background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
      color: white;
      font-size: 24rpx;
      cursor: pointer;
      transition: background-color 0.3s;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  /* 粉丝列表 */
  .fans-list-box {
    .fans-list {
      display: flex;
      align-items: center;
      height: 140rpx;
      padding: 0 22rpx;
  
      .avatar {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
      }
  
      .name {
        font-size: 28rpx;
        font-weight: 500;
        flex: 1;
        padding-left: 11rpx;
        padding-right: 5rpx;
        // 省略号，超出一行
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
  
  
      }
  
      .status {
        width: 140rpx;
        height: 56rpx;
        border-radius: 10rpx;
        background: linear-gradient(270deg, #003ad9 0%, #3dc8ff 100%);
        color: #fff;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
  
      .no-fans-btn {
        background: #f3f3f5;
        color: #3d3d3d;
      }
    }
  }
  
  /* 没有粉丝 */
  .no-fans {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 44px);
  
    &-img {
      width: 165rpx;
      height: 160rpx;
    }
  
    &-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #3D3D3D;
      margin-top: 16rpx;
      margin-bottom: 8rpx;
    }
  
    &-desc {
      font-weight: 500;
      font-size: 28rpx;
      color: #8D8D91;
    }
  
  
  }